<section class="wsl-page-tab" [id]="tabId">
  <div class="wsl-box space-y-4 p-4">
    <app-home-list-filter
      [manager]="filterManager"
      [params]="filterParams()"
      [stats]="filterStats()"
      (updateList)="updateList($event)" />
    <div *ngIf="countShownRows('common')">
      <div class="wsl-list-head">
        <h3>Common Keys</h3>
        <p>
          Results that are both in version {{ data.params.srcBatchName }}
          {{
            data.suite.latest.batchSlug === data.params.srcBatchSlug
              ? '(latest)'
              : ''
          }}
          and in version {{ data.params.dstBatchName }}
          {{
            data.suite.baseline.batchSlug === data.params.dstBatchSlug
              ? '(baseline)'
              : ''
          }}
        </p>
        <p *ngIf="countShownRows('common') !== countRows('common')">
          You are viewing
          <b>
            {{
              countShownRows('common')
                | i18nPlural : { '=1': 'one', other: '#' }
            }}
          </b>
          of {{ countRows('common') }} common results.
        </p>
      </div>
      <ul class="wsl-list-body">
        <li
          class="wsl-list-item-outer"
          *ngFor="let item of getShownRows('common'); let i = index"
          (click)="selectedRow = i"
          [ngClass]="
            selectedRow === i
              ? 'border-l-sky-200 dark:border-l-sky-700'
              : 'border-l-transparent'
          ">
          <app-element-item-result [key]="item" [params]="data.params" />
        </li>
      </ul>
    </div>
    <div *ngIf="countShownRows('fresh')">
      <div class="wsl-list-head">
        <h3>New Keys</h3>
        <p>
          Results that are submitted in version {{ data.params.srcBatchName }}
          {{
            data.suite.latest.batchSlug === data.params.srcBatchSlug
              ? '(latest)'
              : ''
          }}
          but were not included in version {{ data.params.dstBatchName }}
          {{
            data.suite.baseline.batchSlug === data.params.dstBatchSlug
              ? '(baseline)'
              : ''
          }}
        </p>
        <p *ngIf="countShownRows('fresh') !== countRows('fresh')">
          You are viewing
          <b>
            {{
              countShownRows('fresh') | i18nPlural : { '=1': 'one', other: '#' }
            }}
          </b>
          of {{ countRows('fresh') }} new results.
        </p>
      </div>
      <ul class="wsl-list-body">
        <li
          class="wsl-list-item-outer"
          *ngFor="let item of getShownRows('fresh'); let i = index"
          (click)="selectedRow = i + countShownRows('common')"
          [ngClass]="
            selectedRow === i + countShownRows('common')
              ? 'border-l-sky-200 dark:border-l-sky-700'
              : 'border-l-transparent'
          ">
          <app-element-item-result [key]="item" [params]="data.params" />
        </li>
      </ul>
    </div>
    <div *ngIf="countShownRows('missing')">
      <div class="wsl-list-head">
        <h3>Missing Keys</h3>
        <p>
          Results that were included in version {{ data.params.dstBatchName }}
          {{
            data.suite.baseline.batchSlug === data.params.dstBatchSlug
              ? '(baseline)'
              : ''
          }}
          but are not submitted in version {{ data.params.srcBatchName }}
          {{
            data.suite.latest.batchSlug === data.params.srcBatchSlug
              ? '(latest)'
              : ''
          }}
        </p>
        <p *ngIf="countShownRows('missing') !== countRows('missing')">
          You are viewing
          <b>
            {{
              countShownRows('missing')
                | i18nPlural : { '=1': 'one', other: '#' }
            }}
          </b>
          of {{ countRows('missing') }} missing results.
        </p>
      </div>
      <ul class="wsl-list-body">
        <li
          class="wsl-list-item-outer"
          *ngFor="let item of getShownRows('missing'); let i = index"
          (click)="
            selectedRow = i + countShownRows('common') + countShownRows('fresh')
          "
          [ngClass]="
            selectedRow ===
            i + countShownRows('common') + countShownRows('fresh')
              ? 'border-l-sky-200 dark:border-l-sky-700'
              : 'border-l-transparent'
          ">
          <app-element-item-result [key]="item" [params]="data.params" />
        </li>
      </ul>
    </div>
    <app-home-list-pager
      [params]="pagerParams()"
      [stats]="filterStats()"
      (updateList)="updateList($event)" />
  </div>
</section>
